import React, { Component } from 'react';
import { StyleSheet, Image, Text, View, Alert, ScrollView, RefreshControl } from 'react-native';

class Mine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }

    render() {
        let { text } = this.state;
        return (
            <View style={styles.box}>
                {/* 用户信息 */}
                <View style={styles.information}>
                    <View style={[styles.informationItem, { marginBottom: 20 }]}>
                        <Image style={styles.userImage} source={{ uri: 'http://b.hiphotos.baidu.com/image/pic/item/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg' }} />
                        <View style={{ flex: 2, justifyContent: 'center', marginLeft: 10 }}>
                            <Text style={{ marginBottom: 5, fontSize: 18 }}>我怀念的 80后 <Image style={{ width: 15, height: 15 }} source={require('./assets/images/woman.png')} /></Text>
                            <Text style={{ fontSize: 14, color: '#b1b1b1' }}>没有小角色 只有小演员</Text>
                        </View>
                        <Image style={{ width: 20, height: 20 }} source={require('../../assets/images/right-arrow.png')} />
                    </View>
                    <View style={styles.statistical}>
                        <View style={styles.vertical}>
                            <Text style={{ marginBottom: 5, fontSize: 17 }}>8.8万</Text>
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>获赞</Text>
                        </View>
                        <View style={[styles.vertical, styles.leftRightBorder]}>
                            <Text style={{ marginBottom: 5, fontSize: 17 }}>12.4万</Text>
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>粉丝</Text>
                        </View>
                        <View style={styles.vertical}>
                            <Text style={{ marginBottom: 5, fontSize: 17 }}>52</Text>
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>关注</Text>
                        </View>
                    </View>
                </View>
                {/* 我的订单 */}
                <View style={styles.order}>
                    <View style={[styles.transverse, { padding: 15 }]}>
                        <Text style={{ marginBottom: 5, fontSize: 17 }}>我的订单</Text>
                        <Text style={{ fontSize: 15, color: '#b1b1b1' }}>查看全部订单 <Image style={{ width: 15, height: 15 }} source={require('../../assets/images/right-arrow.png')} /></Text>
                    </View>
                    <View style={[styles.transverse, { paddingTop: 10, paddingLeft: 40, paddingRight: 40, paddingBottom: 20 }]}>
                        <View style={styles.vertical}>
                            <Image style={[styles.orderIcon, { width: 21, height: 20.5 }]} source={require('./assets/images/payment.png')} />
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>代付款</Text>
                        </View>
                        <View style={styles.vertical}>
                            <Image style={[styles.orderIcon, { width: 23.5, height: 19 }]} source={require('./assets/images/delivery.png')} />
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>代发货</Text>
                        </View>
                        <View style={styles.vertical}>
                            <Image style={[styles.orderIcon, { width: 27.5, height: 22 }]} source={require('./assets/images/goods.png')} />
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>待收货</Text>
                        </View>
                        <View style={styles.vertical}>
                            <Image style={[styles.orderIcon, { width: 20.65, height: 22 }]} source={require('./assets/images/record.png')} />
                            <Text style={{ fontSize: 15, color: '#b1b1b1' }}>已完成</Text>
                        </View>
                    </View>
                </View>
                {/* 功能列表 */}
                <View style={styles.FeatureList}>
                    <View style={[styles.transverse, styles.FeatureListItem]}>
                        <Image style={{ width: 16.5, height: 16 }} source={require('./assets/images/wallet.png')} />
                        <Text style={{ flex: 1, fontSize: 15, color: '#b1b1b1', marginLeft: 8 }}>我的钱包</Text>
                        <Text style={{ fontSize: 15, color: '#b1b1b1', marginRight: 2 }}>一通币</Text>
                        <Image style={{ width: 15, height: 15 }} source={require('../../assets/images/right-arrow.png')} />
                    </View>
                    <View style={[styles.transverse, styles.FeatureListItem]}>
                        <Image style={{ width: 12, height: 14 }} source={require('./assets/images/shipping-address.png')} />
                        <Text style={{ flex: 1, fontSize: 15, color: '#b1b1b1', marginLeft: 8 }}>收货地址</Text>
                        <Image style={{ width: 15, height: 15 }} source={require('../../assets/images/right-arrow.png')} />
                    </View>
                    <View style={[styles.transverse, styles.FeatureListItem]}>
                        <Image style={{ width: 14.5, height: 15.5 }} source={require('./assets/images/short-video.png')} />
                        <Text style={{ flex: 1, fontSize: 15, color: '#b1b1b1', marginLeft: 8 }}>短视频</Text>
                        <Image style={{ width: 15, height: 15 }} source={require('../../assets/images/right-arrow.png')} />
                    </View>
                    <View style={[styles.transverse, styles.FeatureListItem]}>
                        <Image style={{ width: 17, height: 16.5 }} source={require('./assets/images/collection.png')} />
                        <Text style={{ flex: 1, fontSize: 15, color: '#b1b1b1', marginLeft: 8 }}>我的收藏</Text>
                        <Image style={{ width: 15, height: 15 }} source={require('../../assets/images/right-arrow.png')} />
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    box: {
        flex: 1,
        backgroundColor: '#f4f4f4'
    },
    transverse: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    vertical: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    leftRightBorder: {
        paddingLeft: 45,
        paddingRight: 45,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderStyle: 'solid',
        borderColor: '#F4F4F4'
    },
    //用户信息
    information: {
        borderBottomWidth: 1,
        borderColor: '#eee',
        padding: 20,
        backgroundColor: '#fff'
    },
    informationItem: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    userImage: {
        width: 50,
        height: 50,
        borderRadius: 25
    },
    statistical: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft: 20,
        paddingRight: 20
    },
    //订单
    order: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#fff',
        marginBottom: 10
    },
    orderIcon: {
        width: 21,
        height: 22,
        marginBottom: 8
    },
    //功能模块
    FeatureList: {
        flex: 1
    },
    FeatureListItem: {
        backgroundColor: '#fff',
        paddingTop: 17,
        paddingBottom: 17,
        paddingLeft: 15,
        paddingRight: 15,
        marginBottom: 1
    }
})

export default Mine;